*{
	margin:0px;
	padding:0px;
}

/*宽度高度固定的div垂直居中和水平居中*/

.cross{
	width:300px;
	height:300px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-150px;
	margin-top:-150px;
}


/*无固定宽度的div水平居中*/
/*
.container{
	width:500px;
	height:500px;
	background:red;
	text-align:center;
}
.cross{
	display:inline-block;
}
*/

/*无固定高度的div垂直居中*/
/*
.container{
	display:table;
	width:500px;
	height:500px;
	background:red;
}
.cross{
	display:table-cell;
	vertical-align:middle;
}
*/

/*高度宽度不固定的div垂直居中和水平居中*/
/*
.container{
	display:table;
	width:500px;
	height:500px;
	background:red;
}
.cross{
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}
*/

.cross .same{
	width:100px;
	height:100px;
	position:absolute;
	border-radius:2px;
}
.one{
	background:#9C27B0;	
	left:100px;
	box-shadow:0 0 20px #666;
}
.two{
	background:#629600;
	top:100px;
	box-shadow:0 0 20px #666;
}
.three{
	background:#FFF;
	left:100px;
	top:100px;
	/*下面是css3的伸缩盒写的水平和垂直方向居中*/
	
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	
	/*以下代码在firefox中不能实现，原因是受到这个盒子display:absolute的影响
	  解决办法是在这个盒子的img外再加一层盒子，让这层盒子实现下面的代码
	*/
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;
	
}
.four{
	background:#FFEC00;
	left:200px;
	top:100px;
	box-shadow:0 0 20px #666;
}
.five{
	background:#E91E63;
	left:100px;
	top:200px;
	box-shadow:0 0 20px #666;
}
.cross .three img{
	width:24px;
	height:24px;
	/*
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-12px;
	margin-top:-12px;	
	*/
}

